<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>朋友圈发布</title>
	<link rel="stylesheet" type="text/css" href="/qy/css/public.css">
	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
	<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
	<style type="text/css">
		html{
			height: 100%;
		}
		body{
			height: 100%;
		}
		.friendPublish_container{
			height: 100%;
		}
		.friendPublish_content{
			height: 100%;
			position: relative;
		}
		.friendPublish_mainTextarea_container{
			display: flex;
		}
		.friendPublish_mainTextarea_container textarea{
			flex: 1;
			border: none;
			resize: none;
			height: 114px;
			padding: 10px;
			font-size: 15px;
			color: #353535;
			margin-bottom: 15px;
			font-family: "Microsoft YaHei";
		}
		.friendPublish_mainImg_container{
			position: relative;
			overflow: hidden;
			padding: 5px;
		}
		.friendPublish_mainImg_content{
			width: 88px;
			height: 88px;
			position: relative;
			float: left;
			margin: 10px 5px;
		}
		.friendPublish_mainImg_content img{
			width: 88px;
			height: 88px;
			display: block;
		}
		.friendPublish_mainImg_content svg{
			position: absolute;
			width: 10px;
			height: 10px;
			right: -9px;
			top: -7px;
			background: #eaeaea;
			padding: 5px;
			border-radius: 50%;
			display: block;
			fill: #909090;
		}
		.friendPublish_mainVideoAdd_container{
			width: 84px;
			height: 84px;
			position: relative;
			float: left;
			margin: 10px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #ececec;
		}
		.friendPublish_mainVideoAdd_container svg{
			width: 50px;
			height: 50px;
			display: block;
			fill: #cdcdcd;
		}
		.friendPublish_mainImgAdd_container{
			width: 84px;
			height: 84px;
			position: relative;
			float: left;
			margin: 10px 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2px solid #ececec;
			cursor: pointer;
		}
		.friendPublish_mainImgAdd_container svg{
			width: 50px;
			height: 50px;
			display: block;
			fill: #cdcdcd;
		}
		.friendPublish_mainVideo_container{
			align-items: flex-end;
			display: flex;
			padding: 0 5px;
		}
		.friendPublish_mainVideo_content{
			margin: 10px 5px;
		}
		.friendPublish_mainLink_container{
			display: flex;
			padding: 10px;
		}
		.friendPublish_mainLink_container input{
			-webkit-appearance: none;
			border: 1px solid #ececec;
			flex: 1;
			font-size: 15px;
			padding: 10px;
			border-radius: 5px;
			color: #666;
			font-family: "Microsoft YaHei";
		}
		.friendPublish_submitButton_container{
			display: flex;
			padding: 0 25px;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 50px;
		}
		.friendPublish_submitButton_container button{
			outline: none;
			-webkit-appearance: none;
			background: #5076b8;
			border: none;
			font-size: 15px;
			color: #fff;
			border-radius: 5px;
			flex: 1;
			padding: 10px;
		}
		.friendPublish_mainVideoImgAdd_container input{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			opacity: 0;
		} 
	</style>
</head>
<body>
	<div class="friendPublish_container">
		<div class="friendPublish_content">
			<div class="friendPublish_main_container">
				<!-- 多行文本 -->
				<div class="friendPublish_mainTextarea_container">
					<textarea placeholder="输入想发表的内容" id="writing" name="writing">{$userPublish->writing}</textarea>
				</div>
				<!-- 视频 -->
				<div class="friendPublish_mainVideo_container">
					<input type="hidden" id="video" value="{$userPublish->video}"/>
					<div id="video_box">
					</div>
					<!-- 视频部分 -->
					<!--<div class="friendPublish_mainVideo_content">
						<div class="prism-player" id="player-con"></div>
					</div>-->
					<!-- 添加视频图标 -->
					<div class="friendPublish_mainVideoAdd_container friendPublish_mainVideoImgAdd_container">
						<svg t="1596079809668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2261"><path d="M810.666667 469.333333h-256V213.333333a42.666667 42.666667 0 0 0-85.333334 0v256H213.333333a42.666667 42.666667 0 0 0 0 85.333334h256v256a42.666667 42.666667 0 0 0 85.333334 0v-256h256a42.666667 42.666667 0 0 0 0-85.333334z" p-id="2262"></path></svg>
						<input type="file" accept="video/*" name="file" id="file" onchange="upload_video()">
					</div>
				</div>
				<div><pre><span>封面图</span></pre>
					<input type="hidden" id="videos" value=""/>
					<div id="box">
						<input type="hidden" id="img" id="imghiden">
						<img src="{$userPublish->pics[0]}" {if !$userPublish->pics[0]}style="display: none;"{/if} id="images" width="220px" height="200px"  onclick="falses()">
                        <input type="file" hidden id="filkes" value="{$userPublish->pics[0]}"/>
					</div>
					{if !$userPublish->pics[0]}
					<div class="friendPublish_mainVideoAdd_container friendPublish_mainVideoImgAdd_container ands" onclick="falses()">
						<svg t="1596079809668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2261"><path d="M810.666667 469.333333h-256V213.333333a42.666667 42.666667 0 0 0-85.333334 0v256H213.333333a42.666667 42.666667 0 0 0 0 85.333334h256v256a42.666667 42.666667 0 0 0 85.333334 0v-256h256a42.666667 42.666667 0 0 0 0-85.333334z" p-id="2262"></path></svg>
					</div>
					{/if}
				</div>
			</div>
			<div class="friendPublish_submitButton_container">
				<button onclick="publish_video()">发布</button>
			</div>
		</div>
	</div>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script>
		function publish_video(){
			var writing = $('#writing').val();
			var img = $('#img').val();	
			var video = $('#video').val();	
			if(!video){
				tusi("请上传视频");
				return false;
			}
			if(!img){
				tusi("请上传视频封面");
				return false;
			}
			myAjaxPost(false, true, '', { img:img,writing:writing,video:video}, function (resp) {
				if (resp.status == 'success'){
					layer.msg(resp.msg);
						setTimeout(function(){
							window.history.back(-1);
						},1000);
				}else{
					layer.msg(resp.msg);
				}
			});
		}
	</script>
	<script>
		function upload_video(){
			var formData = new FormData();
			 formData.append("file",$("#file")[0].files[0]);
			 $.ajax({
				url: "upload_video.html",
				type: "post",
				data: formData,
				processData: false,
				contentType: false,
				success:function(resp){
					$("#file").val('');
					if(resp.status == 'success'){
						$('#video').val(resp.data);
						initVideo(resp.data);
					}else{
						tusi(resp.msg)
					}
				}
			 })
		}

		 function falses() {
	        $("#filkes").trigger("click");
	        openuploadstow();
	    }
    
        function openuploadstow() {
	        $("#filkes").change(function () {
	            var formdata = new FormData();
	            formdata.append('file', $("#filkes")[0].files[0]); //获取file信息
	            $.ajax({
	                url: "add_file.html",
	                type: 'post',
	                data: formdata,
	                cache: false,
	                dataType: 'json',
	                processData: false,
	                contentType: false,
	                success: function (e) {
	                    if (e.status == "success") {
	                		tusi(e.msg);
	                        var data = e.data;
	                        $('#images').attr('style', "display:block");
	                        $('.ands').attr('style', "display:none");
	                        $('#images').attr('src', data);
	                        $('#img').val(data);
	                        $("#imghiden").val(data);
	                    } else {
	                        tusi(e.msg, '');
	                    }
	                }
	            });
	        });
	    }
	    if('{$userPublish->video}'){
	    	initVideo('{$userPublish->video}');
	    }
		function initVideo(video){
			$('#video_box').empty();
			var html = '';
			html += '<div class="friendPublish_mainVideo_content">';
			html += '<div class="prism-player" id="player-con"></div>';
			html += '</div>';
			$('#video_box').append(html);
			var player = new Aliplayer({
			  "id": "player-con",
			  "source": video,
			  "width": "220px",
			  "height": "200px",
			  "autoplay": true,
			  "isLive": false,
			  "rePlay": false,
			  "playsinline": true,
			  "preload": true,
			  "controlBarVisibility": "hover",
			  "useH5Prism": true,
			  "skinLayout": [
				{
				  "name": "bigPlayButton",
				  "align": "blabs",
				  "x": 80,
				  "y": 65
				},
				{
				  "name": "H5Loading",
				  "align": "cc"
				},
				{
				  "name": "errorDisplay",
				  "align": "tlabs",
				  "x": 0,
				  "y": 0
				},
				{
				  "name": "infoDisplay"
				},
				{
				  "name": "tooltip",
				  "align": "blabs",
				  "x": 0,
				  "y": 56
				},
				{
				  "name": "thumbnail"
				},
				{
				  "name": "controlBar",
				  "align": "blabs",
				  "x": 0,
				  "y": 0,
				  "children": [
					{
					  "name": "progress",
					  "align": "blabs",
					  "x": 0,
					  "y": 44
					},
					{
					  "name": "playButton",
					  "align": "tl",
					  "x": 15,
					  "y": 12
					},
					{
					  "name": "timeDisplay",
					  "align": "tl",
					  "x": 10,
					  "y": 7
					},
					{
					  "name": "fullScreenButton",
					  "align": "tr",
					  "x": 10,
					  "y": 12
					},
					{
					  "name": "volume",
					  "align": "tr",
					  "x": 5,
					  "y": 10
					}
				  ]
				}
			  ]
			}, function (player) {
				console.log("The player is created");
			});
		}
	</script>
	<script type="text/javascript">
		$('.friendPublish_mainImg_content svg').click(function(){
			$(this).parent().remove();
		})
	</script>
</body>
</html>